import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入单文件组件
import HomeView from '../views/Home'
import ListView from '../views/List'
import DetailView from '../views/Detail'
import DetailCopyView from '../views/Detail/indexCopy.vue'
import CarView from '../views/Car'
import LoginView from '../views/Login'
import MineView from '../views/Mine'


// Vue.use()  可以在Vue中导入插件 (vue-router官方定义的插件)
Vue.use(VueRouter);   // 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)


// 项目主页  
// 以前项目主页: http://localhost:8080/#/  => 推广出去   http://laowang.com/#/ 
// 项目维护后: http://localhost:8080/#/home  => 推广出去 http://laowang.com/#/home

// 解决方法1: 
// 让访问以前地址的人  => 统一跳转 /home


// 路由配置    

const routes = [

  // 重定向 => 在路由配置中的跳转操作
  // 重定向  => 访问/ 自动跳转/home
  // {
  //   path: '/',
  //   redirect:"/home" 
  // },

  // 别名:  访问 /  /home  都渲染HomeView视图
  {
    path: '/home',
    alias: "/",   // 别名
    name: 'home',        // 命名路由
    component: HomeView,  // 普通引入 -> 根组件挂载时直接引入 
  },
  {
    path: '/list',
    name: 'list',
    component: ListView,  // 普通引入 -> 根组件挂载时直接引入 
  },
  { 
    // 动态路径参数(params)   => 以冒号开头
    // path => /detail/:proid  (此时proid不是作为路由 -> 而是路径参数 -> 对应路径接收数据)
    // url  => /detail/100 
    // 页面中的所有组件均可以通过 this.$route.params => {proid:100} 访问
    // 一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params

    path: '/detail/:proid',
    name: 'detail',
    component: DetailView,  // 普通引入 -> 根组件挂载时直接引入 
  },
  { 
    path: '/detailcopy',
    name: 'detailcopy',
    component: DetailCopyView,  // 普通引入 -> 根组件挂载时直接引入 
  },
  {
    path: '/car',
    name: 'car',
    component:CarView,  // 普通引入 -> 根组件挂载时直接引入 
  },
  {
    path: '/login',
    name: 'login',
    component:LoginView,  // 普通引入 -> 根组件挂载时直接引入 
  },
  {
    path: '/mine',
    name: 'mine',
    component:MineView,  // 普通引入 -> 根组件挂载时直接引入 
  },
  // { 
  //   // 如果是未配置的路由地址  => 统一展示 NotFound 视图 (缺点: 路径还是错误的路由地址)
  //   // 如果想匹配任意路径，我们可以使用通配符 (*)
  //   // 当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：
  //   path:"*",
  //   name:"notfound",
  //   component:() => import(/* webpackChunkName: "about" */ '@/views/NotFound'),
  // },


  { 
    path:"/404",
    name:"notfound",
    component:() => import(/* webpackChunkName: "about" */ '@/views/NotFound'),
  },
  { 
    // 如果是未配置的路由地址  => 统一跳转 404
    path:"*",
    // redirect:"/404",   // 选项值是字符串 => 默认基于path路径跳转
    // redirect:{name:"notfound",query:{a:1,b:2}},   // 选项值是对象时 =>可以基于path路径或name跳转 (可以带数据,只能是死数据)
    redirect:(from)=>{

      // 当输入错误路由路径时 -> 默认准备跳转错误地址 => 没有匹配到 -> 跳转 /404
      // form 可以理解为 从哪个路由地址跳转/404

      console.log(from);
      return {name:"notfound",query:{wd:from.params.pathMatch}}
    }
  },  
]

// 根据路由配置生成 路由实例
const router = new VueRouter({
  mode: 'hash', // 路由模式  => hash/history
  base: process.env.BASE_URL,
  routes
})

// 导出路由实例
export default router 
